<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
  <title>HTML</title>

  <!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
  <link rel="shortcut icon" href="/favicon.ico">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
  <link rel="stylesheet" type="text/css" href="../../css/api.css" />

	<style>
		html,body {width: 100%;height: 100%;background:transparent;}

		.floatbox {position: absolute; text-align: center; background: #fff; bottom: 0;width: 100%;}
    .floatmask {background: rgba(0,0,0,0.2);width: 100%;height: 100%;position: absolute;top:0;}
    .floatheader {height: 3rem; line-height: 3rem; font-size: 1rem; color: #999; text-align: center;}
		.floatbody {border-top: 1px solid #dcdcdc;border-bottom: 1px solid #dcdcdc;padding: 1rem 0;}
    .thirdcompy::before,
    .thirdcompy::after {
      content: '';
      display: block;
      clear: both;
    }
    .thirdcompy > div {
      width: 25%;
      float: left;
    }
    .thirdcompy > div .thirdcompy_img {
      width: 50%;
      margin: auto;
      overflow: hidden;
      border-radius: 50%;
    }
    .thirdcompy > div .thirdcompy_img img {
      width: 100%;
    }
    .thirdcompy > div p {
      font-size: 1rem;
      color: #999;
      text-align: center;
    }
		.floatfooter {height: 3rem; line-height: 3rem; font-size: 1.2rem;color: #333;text-align: center;}

	</style>
</head>

<body>
  <div class="floatmask"></div>

	<div class="floatbox">
  <div class="floatheader">分享到</div>
		<div class="floatbody">
			<div class="thirdcompy">
				<div>
          <div class="thirdcompy_img">
            <img src="../../image/share/weixin@3x.png" alt="">
          </div>
          <p>微信好友</p>
        </div>
        <div>
          <div class="thirdcompy_img">
          <img src="../../image/share/pengyouquan@3x.png" alt="">
          </div>
          <p>朋友圈</p>
        </div>
        <div>
          <div class="thirdcompy_img">
          <img src="../../image/share/QQ@3x.png" alt="">
          </div>
          <p>QQ好友</p>
        </div>
				<div>
          <div class="thirdcompy_img">
          <img src="../../image/share/QQKJ@3x.png" alt="">
          </div>
          <p>QQ空间</p>
        </div>
			</div>
		</div>
    <div class="floatfooter clapse">取消</div>
	</div>


</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script>
	function emptyopt () {
	}

	function goback()
	{
		api.closeFrame({name: 'loginmore'});
	}

	function match(src, target)
    {
        var mark = false;
        if(src === target){
            mark = true;
            return mark;
        }else{
            do{
                src = src.parentNode;
                if(src === target){
                    mark = true;
                    return mark;
                }
            }while(src !== document.body && src !== document.documentElement);

            return mark;
        }
    }
    apiready = function(){
        var body = $api.dom('body');
        $api.addEvt(body,'touchend',function(e){

          var main = $api.dom('.clapse');
          var mask = $api.dom('.floatmask');

            if(match(e.target, main) || match(e.target, mask))
            {
                api.closeFrame({name:'share'});
            }


        });

    }
</script>
</html>
